<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=.5, maximum-scale=1.3, user-scalable=no">
    <title>Cry4tal's Qzone</title>
    <link rel="stylesheet" href="css/mui.css">
    <link rel="stylesheet" href="css/index.css">
    <script src="js/mui.js"></script>
    <script src="js/jquery-1.10.2.js"></script>
    <script src="js/index.js"></script>
</head>

<body>

    <div class="mui-panel tr_bar">
        <!-- JSON转Objective-C对象 -->
        <div class="tr_bar_contain">
            <div class="mui--text-headline mui--text-white tr_bar_header">JSON转Objective-C对象</div>
            <div class="mui--text-title mui--text-light-secondary tr_bar_title">Coded by Cry4tal</div>
        </div>
    </div>
    <div class="mui-container">

        <div class="mui-textfield mui-panel">
            <textarea placeholder="json" class="tr_textarea" id="tr_jsonTextarea">{"animals":{
                "dog":[{"name":"Rufus","breed":"labrador",
                        "count":1,"twoFeet":false},
                       {"name":"Marty","breed":"whippet",
                        "count":1,"twoFeet":false}],
                "cat":{"name":"Matilda"}
                }}</textarea>
        </div>

        <div class="tr_middleBtnDiv">
            <button class="mui-btn mui-btn--fab mui-btn--primary" id="tr_transformerBtn">转换</button>
        </div>
        <div>
            <pre><ol id="tr_list" style="padding-left: 0"></ol></pre>
        </div>

    </div>
</body>
</html>